<template>
	<div class="tap-control">
		<div  v-for="(item,index) in title" class="tap-control-item" @click="itemClick(index)" :class = "{active: index == currentIndex}" >
			<span>{{item}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name:'tapControl',
		data(){
			return {
				currentIndex:0
			}
		},
		props:{
			title:Array
		},
		methods:{
			itemClick(index){
				this.currentIndex = index;
				this.$emit('tapClick',index);
			}
		}
	}
</script>

<style>
	.tap-control{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.133333rem 1.6rem;
		height: 1.066666rem;
	}
	.tap-control-item span {
		line-height: 1.066666rem;
		font-size: 0.48rem;
		padding: 0.053333rem 0.133333rem;
	}
	.active {
		color:#FFF1F0;
		border-bottom: 1px solid #FFF1F0;
	}
</style>
